<template>
    <div>
        {{spuInfo}}
        
    <el-form :model="spuInfo" label-width="70px">

        <el-form-item label="spu名称">
        <el-input v-model="spuInfo.spuName"/>
        </el-form-item>

        <el-form-item label="品牌" prop="tmId">
            <el-select v-model="spuInfo.tmId" placeholder="请选择">
            <el-option
                v-for="trademark in trademarkList"
                :key="trademark.id"
                :label="trademark.tmName"
                :value="trademark.id"/>
            </el-select>
        </el-form-item>

        <el-form-item label="spu描述">
            <el-input v-model="spuInfo.description" :rows="5" type="textarea"/>
        </el-form-item>

        <el-form-item label="上传图片">
            <el-upload
            action="http://localhost:18080/admin/product/fileUpload/oss"
            list-type="picture-card"
            :multiple = "true"
            :on-success="handleImageSuccess"
            :on-remove="handleImageRemove">
            <i class="el-icon-plus"></i>
            </el-upload>

        </el-form-item>
        <el-form-item label="上传海报">
            <el-upload
            action="http://localhost:18080/admin/product/fileUpload/oss"
            list-type="picture-card"
            :multiple = "true"
            :on-success="handlePosterSuccess"
            :on-remove="handlePosterRemove">
            <i class="el-icon-plus"></i>
            </el-upload>

        </el-form-item>

            
        <!--按钮-->
        <div style="margin-top:22px;">
            <el-button type="primary" size="mini" @click="saveSpuInfo()">保存</el-button>
            <el-button type="default" size="mini" @click="backToSpuList()">返回</el-button>
        </div>

    </el-form>
    </div>
</template>

<script>
import * as categoryTrademarkApi from '../../../api/gmall/product/categoryTrademark'
import * as spuApi from '../../../api/gmall/product/spu'
export default {
    data(){
        return{
            spuInfo:{
                spuName:'',
                description:'',
                tmId:'',
                category3Id:0,
                spuImageList:[],
                spuPosterList:[]
            },
            category3Id:'',
            trademarkList:[],

        }
    },
    methods:{
        saveSpuInfo(){
            alert("save")
            spuApi.saveSpuInfo(this.spuInfo).then(res=>{
                if(res.data.ok){
                    alert(res.data.message);
                    this.$emit("saveSpuInfoSuccessEvent",false);
                }
            })
        },
        backToSpuList(){
            alert("backToSpuList")
            this.$emit("clickBackToSpuListEvent",false);//子组件 向父组件传值，通过发送事件，第1个参数：事件名称，第2个参数：事件名称
        },
        init(category3Id){
            this.category3Id = category3Id;
            this.spuInfo.category3Id = category3Id;
            this.findBaseTrademarkListByCategory3Id();
        },
        findBaseTrademarkListByCategory3Id(){
            categoryTrademarkApi.findBaseTrademarkListByCategory3Id(this.category3Id).then(res=>{
                if(res.data.ok){
                    this.trademarkList = res.data.data;
                }
            })
        },
        handleImageSuccess(res, file) {
            console.log(res)
            console.log(file)
            debugger
            if(res.ok){//没有通过axios发送,所以是res.data
                this.spuInfo.spuImageList.push({
                    imgName:file.name,
                    imgUrl:res.data
                }) ;
            }
        },
        handleImageRemove(file, fileList) {
            console.log(file, fileList);
            let imageUrl = file.response.data;
            //debugger
            // for(let index in this.spuInfo.spuImageList){
            //     if(this.spuInfo.spuImageList[index].imgUrl == imageUrl){
            //         this.spuInfo.spuImageList.splice(index,1);
            //     }
            // }

            this.spuInfo.spuImageList = 
                this.spuInfo.spuImageList.filter(spuImage=>{return spuImage.imgUrl!=imageUrl})
        },
        handlePosterSuccess(res, file) {
            if(res.ok){//没有通过axios发送,所以是res.data
                this.spuInfo.spuPosterList.push({
                    imgName:file.name,
                    imgUrl:res.data
                }) ;
            }
        },
        handlePosterRemove(file, fileList) {
            console.log(file, fileList);
            let imageUrl = file.response.data;
            this.spuInfo.spuPosterList = 
                this.spuInfo.spuPosterList.filter(spuImage=>{return spuImage.imgUrl!=imageUrl})
        }
    },
    mounted(){

    }
}
</script>

